<template>
  <div id="myTabs" ref="mytabs">
    <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
      <el-tab-pane
        class="my_tab_pane"
        v-for="item in columnList"
        :key="item.columnCode"
        :label="item.widgetName"
        :name="item.columnCode"
      >
        <div @drop="handleDrop" @dragover="handleDragOver">
          <Editor :comData="item">
            <DemoVue />
          </Editor>
        </div>
      </el-tab-pane>
    </el-tabs>
    <el-button class="mybtn" type="primary">点击</el-button>
  </div>
</template>
<script>
import Editor from '@/components/Editor'
import componentList from '@/custom-component/component-list.js'
import DemoVue from "@/components/Demo";
//eslint-disable-next-line
import { defaultSettingList } from '@/assets/js/data.js'
//eslint-disable-next-line
import { floatRound } from '@/utils'
import { mapState, mapMutations } from 'vuex'
export default {
  name: 'mytabs',
  data() {
    return {
      activeName: ""
    }
  },
  components: {
    Editor,
    DemoVue
  },
  watch: {
    columnList() {
      if (this.columnList.length > 0) {
        this.activeName = this.columnList[0].columnCode
        this.setMyTabsWidth(0)
      }
    }
  },
  computed: {
    ...mapState([
      'columnList'
    ])
  },
  mounted() {
    //获取对应分区的分析实例
    this.getDefaultSettingList()
  },
  methods: {
    ...mapMutations([
      'setDefaultSettingList'
    ]),
    handleDrop(e) {
      e.preventDefault()
      e.stopPropagation()
      const index = e.dataTransfer.getData('index')
      const val = e.dataTransfer.getData('val')
      const component = componentList[index]
      console.log(val, component)
      // this.addEchartsExapmleData({ val, uuid: guid(), component })
    },
    handleDragOver(e) {
      e.preventDefault()
      e.dataTransfer.dropEffect = 'copy'
    },
    handleClick(tab, event) {

      this.setMyTabsWidth(tab.index)
      this.getDefaultSettingList()
    },
    //外框架的宽是否可改变
    setMyTabsWidth(index) {
      if (this.columnList[index].widgetFbl) {
        let fblData = this.columnList[index].widgetFbl.split("*")
        this.$refs.mytabs.style.width = fblData[0] + 'px'
      }else{
        this.$refs.mytabs.style.width = "100%"
      }
    },
    getDefaultSettingList() {
      setTimeout(() => {
        let data = [
          {
            fxffHeight: 500,//分析实例的高
            fxffWidth: 200, //分析实例的宽
            fxffX: 15, //分析实例的X
            fxffY: 10, //分析实例Y
            kjzFbl: null,
            groupWareCode: "123123",
            defaultSetting: {
              SFLOCK: '0', //是否锁死 0解锁状态, 1加锁状态
              FXFFM: "分析实例1"
            },
            chartTxList: [
              {
                height: "150", //echarts中默认的高
                width: "60" //echarts中默认的宽
              }
            ]
          },
          // {
          //   fxffHeight: 300,//分析实例的高
          //   fxffWidth: 100, //分析实例的宽
          //   fxffX: 100, //分析实例的X
          //   fxffY: 50, //分析实例Y
          //   kjzFbl: "800*800", //实例是否设置分辨率 未设置为null
          //   groupWareCode: "45456",
          //   defaultSetting: {
          //     SFLOCK: '0', //是否锁死 0解锁状态, 1加锁状态
          //     FXFFM: "分析实例2"
          //   },
          //   chartTxList: [
          //     {
          //       height: "150", //echarts中默认的高
          //       width: "60" //echarts中默认的宽
          //     }
          //   ]
          // }
        ]
        data.map(item => {
          if (item.kjzFbl) {
            const fblData = item.kjzFbl.split("*")
            item.fxffHeight = floatRound(item.fxffHeight * Number(fblData[1]) / 600, 0)
            item.fxffWidth = floatRound(item.fxffWidth * Number(fblData[0]) / 600, 0)
          }
        })
        this.setDefaultSettingList(data)
      }, 1000)

    }
  }

}
</script>
<style lang='scss' scoped>
#myTabs {
  position: relative;
  .mybtn {
    position: absolute;
    top: 0;
    right: 0;
  }
}
</style>
<style lang="scss">
#myTabs {
  .el-tabs--border-card > .el-tabs__content {
    padding: 0;
  }
  .el-tabs__content {
    width: 100%;
    // overflow: auto;
  }
}
</style>